<template>
  <div id="testseyyer">
    <!-- 面包屑 -->
     <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:20px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>在线测试</el-breadcrumb-item>
      <el-breadcrumb-item>安排测试</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 头部 -->
      <div class="test-head">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 试卷 -->
          <el-form-item label="试卷" prop="region1">
            <el-select v-model="ruleForm.region1" placeholder="请选择试卷">
              <el-option
                :label="item.tpTitle"
                :value="item.tpId"
                v-for="(item,index) in paper"
                :key="item.index"
                :index="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 班级 -->
          <el-form-item label="班级" prop="region2">
            <el-select v-model="ruleForm.region2" placeholder="请选择班级">
              <el-option
                :label="item.className"
                :value="item.classId"
                v-for="(item,index) in textclass"
                :key="item.classId"
                :index="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 时间 -->
          <el-form-item label="活动时间" prop="region3">
            <div class="book-time">
              <el-date-picker
                v-model="ruleForm.region3"
                type="datetimerange"
                align="right"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['14:00:00', '15:00:00']"
                @change="checkAge"
              ></el-date-picker>
              <span
                class="el-tag el-tag--danger el-tag--light"
                style
                v-show="isShow"
              >用时 : {{this.long}} 分钟</span>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="text-table">
        <el-table :data="task" style="width: 100%">
          <el-table-column label="＃" type="index"></el-table-column>
          <el-table-column label="试卷名" prop="tpTitle"></el-table-column>
          <el-table-column label="班级" prop="className"></el-table-column>
          <el-table-column label="出卷人" prop="userName"></el-table-column>
          <el-table-column label="测试开始时间">
            <template slot-scope="scope">
            <span>{{ scope.row.taskStartTime | formatDate}}</span>
          </template>
          </el-table-column>
          <el-table-column label="测试结束时间">
            <template slot-scope="scope">
            <span>{{ scope.row.taskEndTime | formatDate}}</span>
          </template>
          </el-table-column>
          <el-table-column label="耗时(分钟)" width="130" prop="taskEscapeTime"></el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40,50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.items"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 模态框 -->
    <el-dialog title="修改测试任务" :visible.sync="dialogFormVisible" :append-to-body="true">
      <el-form :model="form" ref="form">
        <el-form-item label="试卷" :label-width="formLabelWidth">
          <el-select v-model="form.value1" placeholder="请选择试卷">
            <el-option
              :label="item.tpTitle"
              :value="item.tpId"
              v-for="(item,index) in paper"
              :key="item.index"
              :index="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" :label-width="formLabelWidth">
          <el-select v-model="form.value2" placeholder="请选择班级">
            <el-option
              :label="item.className"
              :value="item.classId"
              v-for="(item,index) in textclass"
              :key="item.classId"
              :index="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" :label-width="formLabelWidth">
          <div class="book-time">
            <el-date-picker
              v-model="form.value3"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['14:00:00', '15:00:00']"
              @change="checkTime"
            ></el-date-picker>
          </div>
        </el-form-item>
        <span data-v-7e3599ce class="el-tag el-tag--danger el-tag--light">用时：{{this.long1}} 分钟</span>
        <el-form-item>
          <el-button type="primary" @click="submit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from '../../uilt/timeHandle.js'
import {mapState} from 'vuex'
export default {
  data() {
    //试卷的正则
    let region1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入试卷"));
      } else {
        callback();
      }
    };
    //班级的正则
    let region2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入班级"));
      } else {
        callback();
      }
    };
    //时间的正则
    let region3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入时间"));
      } else {
        callback();
      }
    };
    return {
      paper: [], //所有试卷
      textclass: [], //所有班级
      task: [], //测试任务
      items: 0, //总数量
      pageIndex: 1, //当前页
      pageSize: 10, //默认页面数据数量
      currentPage: 1, //默认页面
      isShow: false, //显示测试分钟
      ruleForm: {
        region1: "", //当前试卷
        region2: "", //当前班级
        region3: "" //时间
      },
      rules: {
        //自定义三个方法
        region1: [{ validator: region1, trigger: "change"}],
        region2: [{ validator: region2, trigger: "change"}],
        region3: [{ validator: region3, trigger: "blur" }]
      },
      dialogFormVisible: false, //点击模态框
      form: {
        //模态框
        value1: "",
        value2: "",
        value3: ""
      },
      resDate: "", //测试开始时间
      resTime: "", //测试结束时间
      long: "", //测试总共时常
      resDate1: "", //模态框测试开始时间
      resTime1: "", //模态框测试结束时间
      long1: "", //模态框测试总共时常
      formLabelWidth: "100px", //模态框宽度
      tId: "", //主键id
    };
  },
  computed: {
    ...mapState(['userUid'])},
    inject:['reload'],
  methods: {
    //模态框提交修改测试任务
    submit() {
      this.axios
        .post("/api/TestPaper/ModifyTestTask", {
          taskId: this.tId, //主键编号
          taskTestPaperId: this.form.value1, //试卷编号
          taskClassId: this.form.value2, //班级编号，可修改
          taskStartTime: this.form.value3[0], //测试开始时间，可修改
          taskEndTime: this.form.value3[1] //测试结束时间，可修改
        })
        .then(response => {
          console.log(response);
          //修改成功之后赋值
          this.tId = response.config.data.taskId;
          this.form.value1 = response.config.data.taskTestPaperId;
          this.form.value2 = response.config.data.taskClassId;
          this.form.value3[0] = response.config.data.taskStartTime;
          this.form.value3[1] = response.config.data.taskEndTime;
          //成功删除之后重新渲染
          this.reload();
          this.$message({
            message: "成功修改测试",
            type: "success"
          });
        });
      this.dialogFormVisible = false; //关闭模态框
    },
    //模态框时间改变
    checkTime() {
      this.resDate1 = new Date(this.form.value3[0]); //开始时间
      this.resTime1 = new Date(this.form.value3[1]); //结束时间
      this.long1 =
        (this.resTime1.getTime() - this.resDate1.getTime()) / (60 * 1000); //获取两个时间的分钟差
    },
    //确定时间触发
    checkAge() {
      console.log(this.ruleForm.region3)
      this.resDate = new Date(this.ruleForm.region3[0]); //开始时间
      this.resTime = new Date(this.ruleForm.region3[1]); //结束时间
      this.long =
        (this.resTime.getTime() - this.resDate.getTime()) / (60 * 1000); //获取两个时间的分钟差
      if (this.resDate && this.resTime) {
        this.isShow = true;
      }
    },
    //提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //都满足的情况下提交创建
          this.$post(
              "/api/TestPaper/SetTest?uid=" + this.userUid, //需要uid
              {
                taskTestPaperId: this.ruleForm.region1, //试卷编号
                taskClassId: this.ruleForm.region2, //班级编号
                taskStartTime: this.resDate, //开始时间
                taskEndTime: this.resTime //结束时间
              }
            )
            .then(response => {
              console.log(response);
              //重新渲染
              this.$refs[formName].resetFields();
              this.reload();
              this.isShow = false;
              this.$message({
                message: "成功设置一次测试",
                type: "success"
              });
            });
        } else {
          if (this.ruleForm.region1 == "") {
            //填写试卷
            this.$message({
              showClose: true,
              message: "请输入试卷",
              type: "warning"
            });
          } else if (this.ruleForm.region2 == "") {
            //填写班级
            this.$message({
              showClose: true,
              message: "请输入班级",
              type: "warning"
            });
          } else if (this.ruleForm.region3 == "") {
            //填写时间
            this.$message({
              showClose: true,
              message: "请设置时间",
              type: "warning"
            });
          }
          return false;
        }
      });
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.isShow = false;
    },
    //编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true; //模态框
      // 赋值
      this.form.value1 = row.taskTestPaperId; //试卷编号
      this.form.value2 = row.classId; //班级编号
      this.form.value3 = [row.taskStartTime, row.taskEndTime]; //时间
      this.long1 = row.taskEscapeTime; //分钟
      this.tId = row.taskId; //主键id
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);
      //删除
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //post传参请求
          this.axios
            .post("/api/TestPaper/RemoveTestTask?taskId=" + row.taskId)
            .then(res => {
              console.log(res.data);
              //成功删除之后重新渲染
             this.reload();
            });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 点击切换每页数量数
    handleSizeChange(val) {
      //赋值
      this.pageSize = val;
      // 调用
      this.getTask();
    },
    // 点击切换页面
    handleCurrentChange(val) {
      // 赋值
      this.pageIndex = val;
      // 调用
      this.getTask();
    },
    // 获取所有试卷
    getPaper() {
      //获取所有试卷
      this.$get("/api/TestPaper/GetAllTestPaper").then(response => {
        this.paper = [...response.data];
        //console.log(this.paper);
      });
      //获取所有班级
      this.$get("/api/Class/GetAllClass").then(response => {
        this.textclass = [...response.data];
        //console.log(this.textclass);
      });
    },
    //获取测试任务
    getTask() {
      this.$get("/api/TestPaper/GetTestTask", {
          params: {
            pageIndex: this.pageIndex, //当前页默认第1页
            pageSize: this.pageSize //默认页面数据数量默认10
          }
        })
        .then(response => {
          this.task = [...response.data.data];
          this.items = response.data.items;
          console.log(this.task );
        });
    }
  },
  created() {
    this.getPaper();
    this.getTask();
  },
  //过滤器
   filters: {
    formatDate(time) {
    var date = new Date(time);
    return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
   }}
}
</script>
<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  margin-bottom: 20px;
}
// 头部
.test-head {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
}
/deep/.el-form-item__content {
  text-align: left;
}
/deep/.el-input__inner {
  height: 35px;
  line-height: 35px;
}
.el-form-item {
  margin-bottom: 15px;
}
.el-select {
  width: 100%;
}
.el-col {
  width: 150px;
}
.el-col-2 {
  width: 20px;
  text-align: center;
}
.block {
  margin-top: 20px;
  text-align: center;
}

/deep/.book-time {
  margin-top: 3px;
  text-align: left;
  position: relative;
}
.el-card .el-tag {
  position: absolute;
  top: 4px;
}
/deep/.el-dialog__header {
  text-align: center;
}
/deep/.el-dialog {
  width: 35%;
}
/deep/.el-dialog .el-button--primary {
  margin-left: 100px;
}
.el-dialog .el-tag {
  margin-left: 100px;
  margin-bottom: 20px;
}
.el-dialog .el-date-editor {
  width: 392px;
}
/deep/.el-date-editor .el-range__icon {
  line-height: 27px;
}
/deep/.el-date-editor .el-range__close-icon {
  line-height: 29px;
}

</style>
<style>
  .el-picker-panel__footer .el-button--text{
  display: none
  }
</style>
